<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="kaiji">
    <meta name="keyword" content="博客, 文章, 文章列表， 列表">
    <title>文章作者信息</title>
    <#include "admin/common.ftl" />

    <style type="text/css">
        .form-control {color: black;}
    </style>
</head>

<body>

<section id="container" class="">
    <!--header start-->
    <#include "admin/header.ftl" />
    <!--header end-->
    <!--sidebar start-->
    <#include "admin/sidebar.ftl" />
    <!--sidebar end-->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <!-- page start-->
            <div class="row">
                <div class="col-lg-12">
                    <section class="panel">
                        <header class="panel-heading">文章作者信息列表</header>
                        <!-- 自定义搜索 -->
                        <div class="panel-body">
                            <@privUrlTag code="E00101">
                                <form id="searchForm" class="form-inline" role="form">
                                    <div class="form-group">
                                        <label for="phone" class="sr-only">登录账户名</label>
                                        <input type="text" class="form-control" id="phone" name="phone" placeholder="登录账户名">
                                    </div>
                                    <div class="form-group">
                                        <label for="userName" class="sr-only">博客名</label>
                                        <input type="text" class="form-control" id="userName" name="userName" placeholder="博客名">
                                    </div>
                                    <button id="searchBtn" type="button" class="btn btn-success">查询</button>
                                </form>
                            </@privUrlTag>
                        </div>
                        <!-- 结束自定义搜索 -->
                    </section>
                    <section class="panel">
                        <table class="table table-striped border-top" id="articleTable">
                            <thead>
                            <tr>
                                <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#articleTable .checkboxes" /></th>
                                <th class="dt-body-center">序号</th>
                                <th>博客名称</th>
                                <th>真实姓名</th>
                                <th>手机号码</th>
                                <th>博客等级</th>
                                <th>账号状态</th>
                                <th>来源</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                        </table>
                    </section>
                </div>
            </div>
            <!-- page end-->
        </section>
    </section>
    <!--main content end-->
</section>

<#include "admin/common_js.ftl" />
<script src="${ctx}/js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="${ctx}/assets/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="${ctx}/assets/data-tables/DT_bootstrap.js"></script>
<script src="${ctx}/js/dynamic-table.js"></script>
<script type="text/javascript">
    $(function() {
        var $dataTable = $("#articleTable").DataTable({
            ajax: {
                url: "${ctx}/admin/article/list.html"
            },
            columns: [
                {"data": "authorId"},
                {"data": null},
                {"data": "userName"},
                {"data": "realName"},
                {"data": "phone"},
                {"data": "grade"},
                {
                    "data": "deleteStatus",
                    "render": function(data, type, row, meta) {
                        return data == 0 ? "正在使用" : data == 1 ? "禁用" : "错误";
                    }
                },
                {
                    "data": "resource",
                    "render" : function(data,type, row, meta) {
                        return data == 0 ? "本地网站" : data == 1 ?
                            "微博" : data == 2 ? "QQ" : data == 3 ? "微信" : data == 4 ? "GitHub" : "其他";
                    }
                },
                {"data": null}
            ],
            "columnDefs": [
                {
                    "targets": 0,
                    "className": 'dt-body-center',
                    "render": function (data, type, full, meta){
                        return '<input type="checkbox" name="ids" value="' + $('<div/>').text(data).html() + '">';
                    }
                },
                {
                    "targets": -1,
                    "defaultContent": "<@privUrlTag code='E00102'><button class='btn btn-primary btn-xs urlBtn'><i class='icon-pencil'>文章列表</i></button></@privUrlTag>"
                }
            ],
            fnDrawCallback: function(){
                var api = this.api();
                var startIndex= api.context[0]._iDisplayStart;
                api.column(1).nodes().each(function(cell, i) {
                    cell.innerHTML = startIndex + i + 1;
                });
                $(this).find('input[type=checkbox]').removeAttr('checked');
            }

        });

        //查询按钮
        $("#searchBtn").on("click", function () {
            $dataTable.draw();//查询后不需要保持分页状态，回首页
        });

        // 进入作者文章列表
        $("#articleTable tbody").on("click", ".urlBtn", function () {
            var data = $dataTable.row($(this).parents("tr")).data();
            location.href = "${ctx}/admin/article/page.html?authorId="+data.authorId;
            return false;
        });

    });
</script>
</body>
</html>
